<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>树形下拉选择器</title>
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <script src="assets/layui/layui.js"></script>
    <script src="module/common.js"></script>
    <style wjw>

    </style>
</head>

<body style="padding: 25px;">
    <div class="layui-container layui-form">
        <div class="layui-form-item">
            <label for="" class="layui-form-label">使用文档</label>
            <div class="layui-input-block">
                <a class="layui-btn layui-btn-primary"
                    href="https://wujiawei0926.gitee.io/treeselect/docs/doc.html">点击打开</a>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="" class="layui-form-label">测试1的相关操作</label>
            <div class="layui-input-block">
                <button class="layui-btn" id="btnDestory">销毁</button>
                <button class="layui-btn" id="btnRevoke">撤销选中节点</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="" class="layui-form-label">测试1</label>
            <div class="layui-input-block">
                <input type="text" id="tree" lay-filter="tree" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="" class="layui-form-label">测试2</label>
            <div class="layui-input-block">
                <input type="text" id="tree2" lay-filter="tree2" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="tree3" class="layui-form-label">测试3</label>
            <div class="layui-input-block">
                <input type="text" id="tree3" lay-filter="tree3" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="" class="layui-form-label">layer</label>
            <div class="layui-input-block">
                <button id="layer" class="layui-btn">点击打开</button>
            </div>
        </div>
    </div>

    <script>
        layui.use(['treeSelect', 'form', 'layer'], function () {
            var treeSelect = layui.treeSelect,
                form = layui.form,
                $ = layui.jquery,
                layer = layui.layer;
            // 测试1
            treeSelect.render({
                // 选择器
                elem: '#tree',
                // 数据
                data: 'data/data3.json',
                // 请求头
                headers: {},
                // 异步加载方式：get/post，默认get
                type: 'get',
                // 占位符
                placeholder: '修改默认提示信息',
                // 是否开启搜索功能：true/false，默认false
                search: true,
                // 一些可定制的样式
                style: {
                    folder: {
                        enable: false
                    },
                    line: {
                        enable: false
                    }
                },
                // 点击回调
                click: function (d) {
                    console.log(d);
                },
                // 加载完成后的回调函数
                success: function (d) {
                    console.log(d);
                    // 选中节点，根据id筛选
                    treeSelect.checkNode('tree', 3);

                    console.log($('#tree').val());

                    //  获取zTree对象，可以调用zTree方法
                    var treeObj = treeSelect.zTree('tree');
                    console.log(treeObj);

                    //  刷新树结构
                    treeSelect.refresh('tree');
                }
            });

            // 测试2
            treeSelect.render({
                // 选择器
                elem: '#tree2',
                // 数据
                data: 'data/data3.json',
                // 异步加载方式：get/post，默认get
                type: 'get',
                // 占位符
                placeholder: '占位符',
                // 是否开启搜索功能：true/false，默认false
                search: true,
                style: {
                    folder: {
                        enable: false
                    },
                    line: {
                        enable: true
                    }
                },
                // 点击回调
                click: function (d) {
                    console.log(d);
                },
                // 加载完成后的回调函数
                success: function (d) {
                    console.log(d);
                    // 选中节点，根据id筛选
                    // treeSelect.checkNode('tree', 3);

                    //获取zTree对象，可以调用zTree方法
                    var treeObj = treeSelect.zTree('tree2');
                    console.log('treeObj=>', treeObj);
                    treeObj.setting.check.enable = false;
                    //刷新树结构
                    treeSelect.refresh('tree2');
                }
            });


            // 测试3
            treeSelect.render({
                // 选择器
                elem: '#tree3',
                // 数据
                data: 'data/data4.json',
                // 异步加载方式：get/post，默认get
                type: 'get',
                // 占位符
                placeholder: '==测试3==',
                // 是否开启搜索功能：true/false，默认false
                search: true,
                style: {
                    folder: {
                        enable: false
                    },
                    line: {
                        enable: true
                    }
                },
                // 点击回调
                click: function (d) {
                    console.log(d);
                },
                // 加载完成后的回调函数
                success: function (d) {
                    console.log(d);
                    // 选中节点，根据id筛选
                    // treeSelect.checkNode('tree', 3);
                    //changeData(d);

                }
            });


            // 通过layer打开
            $('#layer').click(function () {
                layer.open({
                    type: 1,
                    title: 'Layer',
                    content: $('.layui-container'),
                    area: ['500px', '300px']
                });
            });

            $('#btnDestory').click(function () {
                treeSelect.destroy('tree');
            });

            $('#btnRevoke').click(function () {
                treeSelect.revokeNode('tree', function (d) {
                    console.log(d);
                    console.log(d.treeId);
                });
            });


            // 不能强制改变 Ztree的数据结构,所以这个方法无效
            function changeData(newData) {
                //获取zTree对象，可以调用zTree方法
                //var treeObj = treeSelect.zTree('tree3');
                // 先销毁
                //zTreeObj.destroy();
                $.fn.zTree.destroy("tree3");
                //var zTreeObj = $.fn.zTree.getZTreeObj($("#tree3"));
                //console.log('zTreeObj', zTreeObj);
                //zTreeObj.destroy();
                var newSettings = {
                    data: {
                        simpleData: {
                            enable: true,
                            idKey: "id",
                            pIdKey: "pId",
                            rootPId: 0
                        }
                    }
                }
                var zTreeObj = $.fn.zTree.init($("#tree3"), newSettings, newData);
                console.log('zTreeObj=>', zTreeObj);
                zTreeObj.refresh();
                // treeObj.setting.check.enable = true;
                // console.log('treeObj=>data==>', treeObj.setting.data);
                // treeObj.setting.data.simpleData.enable = true;
                // treeObj.setting.data.simpleData.pIdKey = "pId";
                // treeObj.setting.data.simpleData.rootPId = 0;
                // treeObj.setting.data = {
                //     simpleData: {
                //         enable: true,
                //         idKey: "id",
                //         pIdKey: "pId",
                //         rootPId: 0
                //     }
                // }
                //console.log('new treeObj=>', treeObj);
                // treeObj.refresh();
                //刷新树结构
                // treeSelect.refresh('tree3');
            }
        });
    </script>
</body>

</html>